<template>
  <div class="chatContainer">
    <van-nav-bar title="小新同学" left-text="返回" left-arrow fixed>
      <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.back()" />
      </template>
    </van-nav-bar>

    <!-- 聊天主题区域 -->
    <div class="chatBox" :style="{'height': fullHeight + 'px' }">
      <div class="chat-list">
        <div class="chat-box" v-for="(item, index) in chatList" :key="index">
          <!-- 左侧是机器人 -->
          <div class="chat-item left" v-if="item.name !== 'me'">
            <van-image
              width="40"
              height="40"
              round
              fit="cover"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            <div class="chat-pao textLeft">{{item.msg}}</div>
          </div>
          <!-- 右侧是当前用户 -->
          <div class="chat-item right" v-else>
            <div class="chat-pao textRight">{{item.msg}}</div>
            <van-image
              width="40"
              height="40"
              round
              fit="cover"
              :src="userInfo.photo"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 底部聊天 -->
    <div class="footer">
      <van-field v-model="msg" />
      <van-button type="primary" size="mini" @click="sendMsg">发送</van-button>
    </div>
  </div>
</template>

<script>
import { io } from 'socket.io-client'
import { getUserDataAPI } from '@/api'
let socket = null
export default {
  data () {
    return {
      msg: '',
      chatList: [],
      fullHeight: document.documentElement.clientHeight - 106,
      userInfo: {}
    }
  },
  async created () {
    const res = await getUserDataAPI()
    this.userInfo = res.data.data
    socket = io('http://toutiao.itheima.net', {
      query: {
        token: this.token
      },
      transports: ['websocket']
    })
    // socket.on('connect', () => {
    //   // console.log('与服务器建立了连接')
    // })
    socket.on('message', data => {
      this.chatList.push({
        name: 'xs',
        msg: data.msg
      })
    })
  },
  methods: {
    sendMsg () {
      if (!this.msg) { return false }
      this.chatList.push({
        name: 'me',
        msg: this.msg
      })
      socket.emit('message', {
        msg: this.msg,
        timestamp: new Date().getTime()
      })
      this.msg = ''
    }
  },
  beforeDestroy () {
    socket.close()
    socket = null
  }
}
</script>

<style lang="less" scoped>
  .chatContainer {
    height: 100vh;
    position: relative;
  }
  .chatBox {
    position: absolute;
    top: 46px;
    bottom: 46px;
    width: 100%;
    overflow: scroll;
  }
  .van-nav-bar {
    background-color: pink;
  }
  /deep/ .van-nav-bar__title, .van-nav-bar /deep/ .van-icon {
    color: #fff;
  }
  .footer {
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 46px;
    background: #fff;
    border-top: 1px solid #eee;
    .van-cell {
      width: 87%;
    }
    /deep/ .van-cell__value {
      border: 1px solid #eee;
      background-color: #f7f7f7;
      border-radius: 4px;
      input {
        padding-left: 6px;
      }
    }
  }
  .chat-list {
    padding: 10px 15px 0px 15px;
    // margin-bottom: 46px;
    box-sizing: border-box;
    .chat-item {
      display: flex;
      margin: 8px 0;
    }
    .chat-pao {
      position: relative;
      border: .01333rem solid #c2d9ea;
      line-height: 1.01333rem;
      max-width: 70%;
      min-width: 1.0666rem;
      padding: 0 10px;
      box-sizing: border-box;
      border-radius: 5px;
      background-color: #e0effb;
      font-size: 14px;
    }
    .chat-box {
      display: flex;
      flex-direction: column;
    }
  }
  .left {
    justify-content: flex-start;
  }
  .right {
    justify-content: flex-end;
  }
  .textLeft {
    margin-left: 10px;
  }
  .textLeft::before {
    content: "";
    position: absolute;
    top: 14px;
    left: -5px;
    width: 10px;
    height: 10px;
    background-color: #e0effb;
    border-left: .01333rem solid #c2d9ea;
    border-bottom: .01333rem solid #c2d9ea;
    transform: rotate(45deg);
  }
  .textRight {
    margin-right: 10px;
  }
  .textRight::before {
    content: "";
    position: absolute;
    top: 14px;
    right: -5px;
    width: 10px;
    height: 10px;
    background-color: #e0effb;
    border-right: .01333rem solid #c2d9ea;
    border-top: .01333rem solid #c2d9ea;
    transform: rotate(45deg);
  }
</style>
